<!DOCTYPE HTML>
<html>
<head>
    <title>&{'Mails.confirmOrder.title'}</title>
</head>
<body style="font-family: Arial;background-color: #F6F5F0;">
<h3>&{'Mails.confirmOrder.header'}</h3>
<span class="details">&{'Mails.confirmOrder.orderDetails'}</span>
<table style="width: 700px; padding: 0; margin: 0;" cellspacing="0">
    <thead>
    <tr>
        <th style="font: bold 11px Arial, Verdana, Helvetica, sans-serif;color: white;border-right: 1px solid #c2ab9c;border-bottom: 1px solid #c2ab9c;border-top: 1px solid #c2ab9c;letter-spacing: 2px;text-transform: uppercase;text-align: left;padding: 6px 6px 6px 12px;background: #534A44;"
            scope="col">&{'Order.summary.table.titleColumn'}
        </th>
        <th style="font: bold 11px Arial, Verdana, Helvetica, sans-serif;color: white;border-right: 1px solid #c2ab9c;border-bottom: 1px solid #c2ab9c;border-top: 1px solid #c2ab9c;letter-spacing: 2px;text-transform: uppercase;text-align: left;padding: 6px 6px 6px 12px;background: #534A44;"
            scope="col">&{'Order.summary.table.quantityColumn'}
        </th>
        <th style="font: bold 11px Arial, Verdana, Helvetica, sans-serif;color: white;border-right: 1px solid #c2ab9c;border-bottom: 1px solid #c2ab9c;border-top: 1px solid #c2ab9c;letter-spacing: 2px;text-transform: uppercase;text-align: left;padding: 6px 6px 6px 12px;background: #534A44;"
            scope="col">&{'Order.summary.table.unitPriceColumn'}
        </th>
    </tr>
    </thead>
    <tbody>
    #{list items:order.orderItems, as:'orderItem' }
    <tr>
        <th style="border: 1px solid #c2ab9c;
            border-top: 0;
            background: #f7f2ef;
            font: bold 10px Arial, Verdana, Helvetica, sans-serif;text-align:left;
            color: #797268;">
            <a style="color: #534A44;
            font-family:Arial;
            font-size:1.2em;"
               href="@@{Product.display(orderItem.productId)}">${orderItem.title}</a></th>
        <td style="border-right: 1px solid #c2ab9c;
            border-bottom: 1px solid #c2ab9c;
            background: #fff;
            padding: 6px 6px 6px 12px;
            color: #4f6b72;" class="${orderItem_parity}">${orderItem.quantity}
        </td>
        <td style="border-right: 1px solid #c2ab9c;
            border-bottom: 1px solid #c2ab9c;
            background: #fff;
            padding: 6px 6px 6px 12px;
            color: #4f6b72;" class="${orderItem_parity}">${orderItem.subtotal}
        </td>
    </tr>
    #{/list}
    </tbody>
    <tfoot>
    <tr>
        <td style="border-right: 1px solid #c2ab9c;
            border-bottom: 1px solid #c2ab9c;
            background: #fff;
            padding: 6px 6px 6px 12px;
            color: #4f6b72;" colspan="2">&{'Mails.confirmOrder.totalSum'}
        </td>
        <td style="border-right: 1px solid #c2ab9c;
            border-bottom: 1px solid #c2ab9c;
            background: #fff;
            padding: 6px 6px 6px 12px;
            color: #4f6b72;font-weight: bold;">${order.subtotal}
        </td>
    </tr>
    </tfoot>
</table>
%{
   def url = play.mvc.Router.getFullUrl("Mails.confirmOrder", [orderId:order.id])
}%
<p>${body}</p>
</body>
</html>